<template>
  <div>
    <slot></slot>
    <Login
      v-model:showLogin="showLogin"
      @goRegister="goRegister"
      @goRewrite="goRewrite"
    />
    <Register v-model:hanldRegister="showRegister" @goLogin="goLogin" />
    <RetrievePassword v-model:reset="showRewritePwd" @goLogin="goLogin" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import Login from "@renderer/components/login/index.vue";

import Register from "@renderer/components/register/index.vue";
import RetrievePassword from "@renderer/components/retrievePassword/index.vue";
import { useUserStore } from "@renderer/store/modules/user";

let userStore = useUserStore();
let showRegister = ref(false);
let showRewritePwd = ref(false);
let showLogin = computed(() => {
  return userStore.showLogin;
});
//
watch(showLogin, () => {
  if (showLogin.value) {
    showRegister.value = false;
    showRewritePwd.value = false;
  }
});
const goLogin = () => {
  userStore.toggleShowLogin(true);
  showRegister.value = false;
  showRewritePwd.value = false;
};

const goRegister = () => {
  userStore.toggleShowLogin(false);
  showRewritePwd.value = false;
  showRegister.value = true;
};
const goRewrite = () => {
  userStore.toggleShowLogin(false);
  showRewritePwd.value = true;
  showRegister.value = false;
};
</script>

<style scoped lang="scss"></style>
